<template>
  <div class="container">
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery">
        <el-form-item label="关键字"><el-input v-model="listQuery.keyword" placeholder="" clearable></el-input></el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listQuery.rec_flag" filterable="">
            <el-option :key="-1" label="全部" value="null"></el-option>
            <el-option v-for="(item ,index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="middle" @click="search()">搜索</el-button>
          <el-button type="default" plain size="middle" @click="clear()">清空</el-button>
          <el-button type="primary" size="middle" @click="addUser()" v-if="controlBtn.add">添加用户</el-button>
        </el-form-item>
      </el-form> 
    </div>
    <el-table v-loading="loading"
    :data="tableData.data"
    border>
    
    <el-table-column
      prop="username"
      align="center"
      label="用户账号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="role_title"
      label="用户角色"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="rec_flag"
      align="center"
      label="状态"
      width="180"
      >
      <template slot-scope="{row}"><span>{{{'10':'启用','20':'禁用'}[row.rec_flag]}}</span></template>
    </el-table-column>
    <el-table-column
      prop="update_at"
      align="center"
      label="更新时间"
      width="180">
    </el-table-column>
    <el-table-column
      align="center"
      width="250"
      label="操作">
      <template slot-scope="{row}">
        <el-button type="primary" plain size="small" @click="getManageInfo(row)">管理设备</el-button>
        <el-button type="primary" size="small" @click="editUser(row)" v-if="controlBtn.edit">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteUser(row)" v-if="controlBtn.del">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加、编辑 -->
  <el-dialog @close="dialogClose" :title="dialogVisible.title" :visible.sync='dialogVisible.show' :close-on-click-modal=false>
    <el-form :rules="rules" :model="dialogVisible" ref="dialogVisible" label-position="top" class="dialogVisible">
      <div class="flex-row">
        <div class="flex-1">
          <el-form-item style="width:98%" label="用户姓名" prop="username"><el-input v-model="dialogVisible.username" placeholder="" clearable></el-input></el-form-item>
        </div>
        <div class="flex-1">
          <el-form-item label="用户密码"  prop="password"><el-input v-model="dialogVisible.password" type="password" placeholder="" clearable></el-input></el-form-item>
        </div>
      </div>
      <div class="flex-row">
        <div style="width: 85%;">
          <el-form-item label="用户角色" prop="role_id">
            <el-select style="width:98%" v-model="dialogVisible.role_id" filterable="">
              <el-option v-for="(item ,index) in roleList" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>        
        </div>
        <div class="flex-1">
          <el-form-item label="状态">
            <el-select style="width:100%" v-model="dialogVisible.rec_flag" filterable="">
              <el-option v-for="(item ,index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
            </el-select>
          </el-form-item>        
        </div>
      </div>
      <el-form-item>
        <el-button type="default" @click="dialogVisible.show=false">取消</el-button>
        <el-button type="primary" @click="dialogSubmit()">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 设备管理 -->
  <el-dialog @close="dialogClose" title="管理设备" :visible.sync='manageVisible' :close-on-click-modal=false>
    <div class="content">
      <template>
        <el-table
          ref="multipleTable"
          :data="manageInfo"
          tooltip-effect="dark"
          style="width: 100%"
          height="500px"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="title"
            label="设备名称">
          </el-table-column>
          <el-table-column
            prop="device_type_title"
            label="设备类型">
          </el-table-column>
        </el-table>
      </template>
      <div class="bottom" style="margin-top:20px">
        <el-button type="default" @click="manageVisible=false">取消</el-button>
        <el-button type="primary" @click="manageSave()">确定</el-button>
      </div>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { user_list, user_save, user_delete,role_list,user_device_info,user_device_save } from '@/api/system'
import store from '@/store'

  export default {
    data() {
      return {
        tableData: [],
        listQuery:{
          page:1,
          page_size:10,
          keyword:'',
          rec_flag:''
        },
        status:[{title:'启用',code:10},{title:'禁用',code:20}],
        loading:false,
        total:0,
        roleList:[],
        dialogVisible:{
          show:false,
          title:'添加用户',
          username:'',
          password:'',
          role_id:'',
          rec_flag:10,
          id:0
        },
        rules:{
          username:[{required:true,message:'账号不能为空',trigger: 'blur'}],
          password:[{required:true,message:'密码不能为空',trigger: 'blur'}],
          role_id:[{required:true,message:'角色不能为空',trigger: 'change'}]
        },
        controlBtn:{
          add:false,
          del:false,
          edit:false,
          auth:false
        },
        manageInfo:[],
        manageVisible:false,
        multipleSelection: [],
        user_id:''
      }
    },
    methods:{
      manageSave(){
        // console.log(this.multipleSelection)
        // if(this.multipleSelection && this.multipleSelection.length>0){
          let arr = []
          this.multipleSelection.forEach(e=>{
            arr.push(e.id)
          })
          // console.log(arr)
          let params = {user_id:this.user_id,device_ids:arr.toString()}
          user_device_save(params).then(res=>{
            this.$message.success(res)
            this.manageVisible=false
          })
        // }else{
        //   this.$message.warning('请选择设备')
        // }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getManageInfo(row){
        this.user_id = row.id
        user_device_info({user_id:row.id}).then(res=>{
          this.manageInfo = res
          this.manageVisible = true
          let arr = res.filter(e=>e.is_selected == 1)
          setTimeout(() => {
            this.toggleSelection(arr)
          }, 500);
        })
      },
      dialogClose(){
        // this.$refs.dialogVisible.resetFields()
      },
      editUser(row){
        this.dialogVisible.title='编辑用户'
        this.dialogVisible.username=row.username
        this.dialogVisible.role_id=row.role_id
        this.dialogVisible.id=row.id
        this.dialogVisible.rec_flag=row.rec_flag
        this.dialogVisible.show=true
      },
      deleteUser(row){
        let that = this
       this.$confirm('确实删除当前用户吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消'
       }).then(()=>{
        user_delete({id:row.id}).then(()=>{
              that.getList()
            })
       })
      },
      dialogSubmit(){
        let that = this
        this.$refs['dialogVisible'].validate((valid)=>{
          if(valid){
            user_save(this.dialogVisible).then(res=>{
              console.log(res)
              that.dialogVisible.show=false
              that.getList()
            })
          }
        })
      },
      search(){
        this.listQuery.page = 1
        this.getList()
      },
      clear(){
        this.listQuery.page = 1
        this.listQuery.keyword = ''
        this.listQuery.rec_flag = ''
        this.getList()
      },
      addUser(){
        this.dialogVisible.title='添加用户'
        this.dialogVisible.username=''
        this.dialogVisible.role_id=''
        this.dialogVisible.id=0
        this.dialogVisible.rec_flag=10
        this.dialogVisible.show=true
      },
      getList(){
        this.loading = true
        console.log(this.listQuery)
        user_list(this.listQuery).then(res=>{
          this.loading = false
          this.tableData = res
        })
      },
      getRoleList(){
        role_list().then(res=>{
          this.roleList = res
        })
      }
    },
    mounted(){
      this.getList()
      this.getRoleList()
      const mainRoutes = store.getters.mainRoutes
      if(mainRoutes.user && mainRoutes.user.length>0){
        mainRoutes.user.forEach(e=>{
          if(e == '增加'){
            this.controlBtn.add = true
          }
          if(e == '删除'){
            this.controlBtn.del = true
          }
          if(e == '修改'){
            this.controlBtn.edit = true
          }
          if(e == '权限'){
            this.controlBtn.auth = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialogVisible {
    ::v-deep.el-form-item__label{
      padding: 0 !important;
    }
  }
</style>